<template>
    <div class="ResultDetails-Panel" v-loading="State.Loading">
        <div class="ResultDetails-Option">
            <div class="ResultDetails-Option-Model" v-for="(item, index) in State.ResultDetailsOption" :key="index"
                @click="SelectOption(index)" :class="State.SelectOptionIndex === index ? 'SeleteOptionActive' : 'Noactive'">
                <span>{{ item.OptionName }}</span>
            </div>
        </div>
        <div class="ResultDetails-PersonalInformation">
            <div class="ResultDetails-PersonalInformation-Model" v-for="(item, index) in State.PersonalInformation"
                :key="index">
                <span>{{ item.Name }}</span>
                <span></span>
                <span>{{ item.value }}</span>
            </div>
        </div>
        <!-- 综合结果分析 -->
        <div v-show="State.SelectOptionIndex === 0">
            <!-- 雷达图面板 -->
            <div class="RadarChartPanel">
                <div id="RadarChart">
                </div>
            </div>
            <div class="ComprehensiveResultsPanel">
                <div>
                    <span>综合结果分析</span>
                </div>
                <div>
                    <span>详细得分点</span>
                </div>
                <div>
                    <span>各项得分</span>
                </div>
                <div class="ResultAnalysisPanel">
                    <div v-for="(its, indexs) in State.ResultAnalysisArr" :key="indexs" class="Resultl-list-item">
                        <span class="Resultl-list-classification">{{ its.name }}</span>
                        <span class="Resultl-list-number">{{ its.process }}</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 操作步骤 -->
        <!-- <div v-show="State.SelectOptionIndex === 1">
            <div class="OperationRecord">
                <el-scrollbar class="elscrollbar">
                    <div class="OperationRecord-model" v-for="(item, index) in State.OperatingSteps" :key="index">
                        <div v-if="item.HeaderData.type == '1'">
                            <span>已完成</span>
                        </div>
                        <div v-else class="OperationRecord-false">
                            <span>未完成</span>
                        </div>
                        <div>{{ item.HeaderData.name }}</div>
                        <div class="stepBox">
                            <div v-for="(items, indexs) in item.Subdata" :key="indexs" class="stepText">
                                <img class="stepimg" src="@/assets/img/product/icon-正确.png" v-if="items.type == 1">
                                <img class="stepimg" src="@/assets/img/product/icon-错误.png" v-else>
                                {{ items.tit }}
                            </div>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
        </div> -->
        <!-- 详细操作记录 -->
        <!-- <div v-show="State.SelectOptionIndex === 2">
            <div class="FaultRecordPanel">
                <el-scrollbar class="elscrollbar">
                    <div class="FaultRecordPanel-model" v-for="(item, index) in State.Record" :key="index">
                        <div v-if="item.Completed == 1">
                            <span>{{ item.TFStatus }}</span>
                        </div>
                        <div v-else class="FaultRecordPanel-false">
                            <span>{{ item.TFStatus }}</span>
                        </div>
                        <div>
                            <span>{{ item.name }}</span>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
        </div> -->
    </div>
</template>
  
<script>
let echarts = require("echarts");
import { defineComponent, reactive, ref, onMounted, toRef, toRefs } from "vue";
import bus from "@/bus.js";
import { ArrowDown } from '@element-plus/icons'
export default defineComponent({
    name: "ResultDetails",
    components: {
        ArrowDown
    },
    props: {
        ResultDetails: {
            type: Object,
            default: () => { },
        },
        MatchBoolean: {
            type: Number,
            default: 1,
        },
    },
    setup(props, ctx) {
        let RadarChart = ref('')
        let State = reactive(
            {
                Loading: true,
                //成绩选项
                ResultDetailsOption: [
                    {
                        OptionName: "综合结果分析"
                    },
                    // {
                    //     OptionName: "操作步骤"
                    // },
                    // {
                    //     OptionName: "详细操作记录"
                    // }
                ],
                //工单所有数据
                orders: '',
                MathBoolean: false,
                //选项
                SelectOptionIndex: 0,
                //个人信息
                PersonalInformation: [
                    {
                        Name: "任务",
                        value: props.ResultDetails.trainingTaskName
                    },
                    {
                        Name: "姓名",   
                        value: props.ResultDetails.userName
                    },
                    {
                        Name: "总用时",
                        value: FNumToDate(props.ResultDetails.time)
                    },
                    // {
                    //     Name: "正确项",
                    //     value: JSON.parse(props.ResultDetails.orders).CorrectOperationInfosCount + '/' + JSON.parse(props.ResultDetails.orders).TotalOperationInfosCount
                    // },
                    {
                        Name: "总得分",
                        value: props.ResultDetails.score
                    }
                ],
                //综合信息
                ResultAnalysisArr: [],
                Record: [],
                OperatingSteps: [],
                RadarChartOption: {
                    tooltip: {
                        trigger: 'axis'
                    },
                    radar: [
                        {
                            indicator: [
                                { text: '工艺流程', max: 100 },
                                { text: '操作规范', max: 100 },
                                { text: '工具使用', max: 100 },
                                { text: '安全意识', max: 100 },
                                { text: '技能熟练', max: 100 }
                            ],
                            center: ['47.5%', '53%'],
                            radius: 160,
                            //改变成圆形
                            shape: 'circle',
                        },
                    ],
                    series: [
                        {
                            type: 'radar',
                            tooltip: {
                                trigger: 'item'
                            },
                            areaStyle: {},
                            data: [
                                {
                                    value: [20, 35, 55, 10, 21],
                                    name: '成绩',
                                }
                            ],
                            itemStyle: {     //此属性的颜色和下面areaStyle属性的颜色都设置成相同色即可实现
                                color: '#196FF7',
                                borderColor: '#196FF7',
                            },
                        },
                    ]
                },
            }
        )
        //处理时间函数
        function FNumToDate(seconds) {
            let hour = Math.floor(seconds / 3600) >= 10 ? Math.floor(seconds / 3600) : '0' + Math.floor(seconds / 3600);
            seconds -= 3600 * hour;
            let min = Math.floor(seconds / 60) >= 10 ? Math.floor(seconds / 60) : '0' + Math.floor(seconds / 60);
            seconds -= 60 * min;
            let sec = seconds >= 10 ? seconds : '0' + seconds;
            return hour + ':' + min + ':' + sec;
        }
        //选择哪个模块
        function SelectOption(index) {
            State.SelectOptionIndex = index
        }
        //处理数值
        function ProcessingData(datas) {
            console.log(datas);
            let keys = Object.keys(datas)
            let values = Object.values(datas)
            let data = keys.map((key, index) => key.concat(`,${values[index]}`))
            let RadarValueArr = []
            for (let i = 0; i < data.length; i++) {
                let C = data[i].split(",")
                let type = C[0].split(":")
                let D = {
                    TFStatus: type[0],
                    name: type[1],
                    Completed: C[1],
                }
                RadarValueArr.push(D)
            }
            // console.log(RadarValueArr);
            return RadarValueArr
        }
        function ArrayData(datas) {
            let keys = Object.keys(datas)
            // console.log(keys);
            let values = Object.values(datas)
            // console.log(values);
            let newKeys = []
            for (let i = 0; i < keys.length; i++) {
                let restructure = keys[i].split(":")
                let resArrays = {
                    type: restructure[0],
                    tit: restructure[1],
                    name: restructure[2],
                }
                newKeys.push(resArrays)
            }
            let newSubdata = []
            values.forEach(item => {
                let newSubdArr = []
                item.forEach(items => {
                    let restructure = items.split(":")
                    let resArrays = {
                        tit: restructure[0],
                        type: restructure[1],
                    }
                    newSubdArr.push(resArrays)
                });
                newSubdata.push(newSubdArr)
            });
            newSubdata.push(newSubdata)
            // console.log(newSubdata);
            let data = []
            newKeys.forEach((item, index) => {
                newSubdata.forEach((items, indexs) => {
                    if (index == indexs) {
                        let newData = {
                            HeaderData: item,
                            Subdata: items,
                        }
                        data.push(newData)
                    }
                });
            });
            // console.log(data);
            return data
        }
        //处理传过来的数值
        function HandleResult(WorkorderIndex) {
            let Result = props.ResultDetails
            if (Result.orders == '') {
                Result.orders = null
            }
            let orders = JSON.parse(Result.orders)
            State.orders = orders
            if (orders) {
                let keys = Object.keys(orders.ComprehensiveResultsAnalysis.RadarValue)
                let values = Object.values(orders.ComprehensiveResultsAnalysis.RadarValue)
                let data = keys.map((key, index) => key.concat(`,${values[index]}`))
                let RadarValueArr = []
                for (let i = 0; i < data.length; i++) {
                    let C = data[i].split(",")
                    let D = {
                        name: C[0],
                        process: C[1],
                    }
                    RadarValueArr.push(D)
                }
                State.ResultAnalysisArr = RadarValueArr
                let arr = []
                let indicator = []
                for (let i = 0; i < RadarValueArr.length; i++) {
                    arr.push(RadarValueArr[i].process)
                }
                for (let i = 0; i < State.ResultAnalysisArr.length; i++) {
                    arr.push(State.ResultAnalysisArr[i].process)
                    indicator.push(
                        { text: State.ResultAnalysisArr[i].name, max: 100 }
                    )
                }
                RadarChart.value.setOption({
                    radar: [
                        {
                            indicator: indicator
                        },
                    ],
                    series: [
                        {
                            data: [
                                {
                                    value: arr,
                                    name: "成绩",
                                }
                            ]
                        }
                    ]
                })
                //操作步骤
                // State.Record = ProcessingData(JSON.parse(props.ResultDetails.record).OperationRecord)

                //详细记录
                // State.OperatingSteps = ArrayData(JSON.parse(props.ResultDetails.orders).OperationSteps)
            } else {
                //没有成绩的时候显示
                State.ResultAnalysisArr = [
                    { name: '拆装流程', process: 0 },
                    { name: '作业规范', process: 0 },
                    { name: '工具使用', process: 0 },
                    { name: '安全规范', process: 0 },
                    { name: '作业工时', process: 0 },
                ]
                RadarChart.value.setOption({
                    radar: [
                        {
                            indicator: [
                                { text: '拆装流程', max: 100 },
                                { text: '作业规范', max: 100 },
                                { text: '工具使用', max: 100 },
                                { text: '安全规范', max: 100 },
                                { text: '作业工时', max: 100 }
                            ]
                        },
                    ],
                    series: [
                        {
                            data: [
                                {
                                    value: [0, 0, 0, 0, 0],
                                    name: '成绩',
                                }
                            ]
                        }
                    ]
                })
            }
        }
        onMounted(() => {
            //获取雷达图的Demo
            RadarChart.value = echarts.init(document.getElementById("RadarChart"));
            RadarChart.value.setOption(State.RadarChartOption);
            HandleResult(0)
            State.Loading = false
        });
        return {
            State,
            RadarChart,
            SelectOption,
        };
    },
});
</script>
<style  scoped lang="less">
.ResultDetails-Panel {
    margin-left: 15px;
    width: 98%;
    height: 90%;
    // background:blue;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
}

.ResultDetails-Option {
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ResultDetails-Option-Model {
    width: 160px;
    height: 40px;
    background: rgba(129, 133, 156, 0.2);
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ResultDetails-Option>div:nth-child(1) {
    border-radius: 20px 20px 20px 20px;
}

.ResultDetails-Option>div:nth-last-child(1) {
    border-radius: 20px 20px 20px 20px;
}

.SeleteOptionActive {
    background: linear-gradient(-90deg, #0974d8, #3d8ef1, #7c7ff8);
    color: #FFFFFF;
}

.Noactive {
    background: rgba(129, 133, 156, 0.1);
}

.ResultDetails-PersonalInformation {
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0px 1px 0px 0px rgba(129, 133, 156, 0.2);
}

.ResultDetails-PersonalInformation-Model {
    width: 33%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

//   .ResultDetails-PersonalInformation>div:nth-child(1){
//     width: 600px;
//   }
.ResultDetails-PersonalInformation-Model>span:nth-child(1) {
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #81859C;
}

.ResultDetails-PersonalInformation-Model>span:nth-child(2) {
    width: 2px;
    height: 16px;
    margin-left: 20px;
    background: #218CDE;
}

.ResultDetails-PersonalInformation-Model>span:nth-child(3) {
    margin-left: 20px;
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #81859C;
}

.RadarChartPanel {
    position: absolute;
    margin-left: 100px;
    margin-top: 50px;
    width: 35%;
    height: 65%;
}

#RadarChart {
    width: 100%;
    height: 100%;
}

.ComprehensiveResultsPanel {
    position: absolute;
    right: 150px;
    margin-top: 70px;
    width: 35%;
    height: 65%;
}

.ComprehensiveResultsPanel>div:nth-child(1) {
    position: absolute;
    width: 100%;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 36px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    background: linear-gradient(0deg, #807DE1 0%, #218CDE 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ComprehensiveResultsPanel>div:nth-child(2) {
    margin-top: 60px;
    width: 100%;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #81859C;
}

.ComprehensiveResultsPanel>div:nth-child(3) {
    margin-top: 20px;
    width: 100%;
    min-height: 30px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.ComprehensiveResultsPanel>div:nth-child(3) span {
    width: 90px;
    min-height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #FFFFFF;
    background: linear-gradient(90deg, #807DE1, #218CDE);
}

.ComprehensiveResultsPanel>div:nth-child(4) {
    margin-top: 10px;
    width: 100%;
    height: 70%;
}

.Resultl-list-item {
    width: 600px;
    height: 60px;
    background: rgba(54, 56, 75, 0);
    box-shadow: 0px -1px 0px 0px rgba(54, 56, 75, 0.2);
}

.Resultl-list-classification {
    position: absolute;
    width: 80px;
    height: 60px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 16px;
    font-family: Arial;
    font-weight: 400;
    color: #81859C;
}

.Resultl-list-number {
    position: absolute;
    width: 98%;
    height: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 16px;
    font-family: Arial;
    font-weight: 400;
    color: #1B1B1D;
}

.ResultAnalysisPanel>div:nth-last-child(1) {
    border-bottom: 1px solid rgba(54, 56, 75, 0.2);
}

//操作步骤
.OperationRecord {
    position: absolute;
    width: 98%;
    height: 70%;
}

.OperationRecord .elscrollbar {
    position: absolute;
    height: 100%;
    width: 100%;
}

.OperationRecord-model {
    margin-left: 20px;
    width: 98%;
    padding-top: 40px;
    overflow: hidden;
}

.OperationRecord .el-scrollbar__view>div:nth-child(1) {
    margin-top: 0px;
}

.OperationRecord-model>div:nth-child(1) {
    width: 5%;
    height: 30px;
    line-height: 30px;
    background: rgba(73, 141, 64, 0);
    border: 1px solid #498D40;
    border-radius: 15px;
    float: left;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #81859C;
}

.OperationRecord-false {
    border: 1px solid #BF3434 !important;
}

.OperationRecord-model>div:nth-child(2) {
    float: left;
    margin-left: 30px;
    margin-bottom: 14px;
    font-size: 22px;
}

.stepBox {
    width: 100%;
    overflow: hidden;
    border-top: 1px solid rgba(54, 56, 75, 0.2);
    text-align: left;
    padding-top: 14px;
}

.stepText {
    padding-left: 200px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #81859C;
    line-height: 38px;
}

.stepimg {
    width: 22px;
    height: 22px;
    margin-bottom: -4px;
}

//详细操作记录
.FaultRecordPanel {
    position: absolute;
    width: 98%;
    height: 70%;
}

.FaultRecordPanel .elscrollbar {
    position: absolute;
    height: 100%;
    width: 100%;
}

.FaultRecordPanel-model {
    margin-left: 20px;
    width: 98%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(54, 56, 75, 0.2);
}

.FaultRecordPanel-model>div:nth-child(1) {
    width: 7%;
    height: 30px;
    background: rgba(73, 141, 64, 0);
    border: 1px solid #498D40;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #81859C;
}

.FaultRecordPanel-false {
    border: 1px solid #BF3434 !important;
}

.FaultRecordPanel-model>div:nth-child(2) {
    margin-left: 10px;
    font-size: 22px;
}
</style>
  